﻿@model RenterClient.Models.PostModels

@{
    ViewBag.Title = "RentDetails";
}






@*                            <p>@Model._Id</p>
                            <p>@Model.Title</p>
                            <p>@Model.Description</p>
                            <p>@Model.Street</p>
                            <p>@Model.PostCode</p>
                            <p>@Model.City</p>
                            <p>@Model.Country</p>*@





<head>

    <!-- <script type="text/javascript">
        $( document ).ready(function() {
            $("[rel='tooltip']").tooltip();

            $('.thumbnail').hover(
                function(){
                    $(this).find('.caption').slideDown(250); //.fadeIn(250)
                },
                function(){
                    $(this).find('.caption').slideUp(250); //.fadeOut(205)
                }
            );
        });
    </script>
 -->
@*    <style>
        #map_canvas {
            /*width: 300px;*/
            height: 300px;
            margin-left: 97px;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        function initialize() {
            var mapCanvas = document.getElementById('map_canvas');
            var mapOptions = {
                center: new google.maps.LatLng(43.657498, -1.432550),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(mapCanvas, mapOptions)
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>*@
</head>

<body>

@*<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="@Url.Action("Index")">| Renter</a>
        </div>*@

        <!-- Collect the nav links, forms, and other content for toggling -->
        @*<div class="collapse navbar-collapse navbar-right navbar-ex1-collapse">*@

<!--            <div class="input-group add-on">
                <input type="text" class="form-control" placeholder="Where would you like to rent ?" name="srch-term" id="srch-term">
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </div>
            </div>-->
           @* <form role="search" class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" placeholder="Where would you like to rent ?" class="form-control">*@
                    <!--<div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                    </div>-->
               @* </div>
            </form>


            <ul class="nav navbar-nav">
                <li><a href="signup.html">Dashboard</a>
                </li>

                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Pauline G.<b class="caret"></b>
                        <img class="img-responsive" src="../../Content/img/profil.jpg" alt="" style="float: left; height: 24px; width: 24px; border-radius: 2px; margin-right: 8px; margin-top: 2px;">
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">My Profile</a></li>
                        <li><a href="#">Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Logout</a></li>
                    </ul>
                </li>
                <li>
                    <button class="btn btn-success" style="margin: 8px;" type="submit">
                        List a rent
                    </button>
                </li>
            </ul>
        </div>*@
        <!-- /.navbar-collapse -->
    @*</div>*@
    <!-- /.container -->
@*</nav>*@


<div style="margin-top: 10px;"></div>

<div class="content-section-a">

    <div class="container">


        <div class="row">
            <div class="col-lg-12 col-sm-12">

                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 thumbnail" style="padding-left: 10px;">
                        <p>
                        <h4 >
                           @Model.Title
                        </h4>
                        </p>
                        <p>
                            <span style="font-size: 13px;">Place: @Model.City</span><br/>
                        </p>
                    </div>

                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-6 thumbnail" style="padding-left: 10px; margin-left: 97px;">
                        <p>@Model.Description</p>
                    </div>
                </div>

                <div class="row">
<!--                    <a class="col-lg-8 col-md-8 col-xs-8 thumbnail">
                        <img class="img-responsive" src="../../Content/img/ipad.png" alt="">
                    </a>-->


                    <!--CAROUSSELLE PART-->

                    <div id="carousel-example-generic" class="col-lg-8 col-md-8 col-xs-8 thumbnail carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="../../Content/img/ipad.png" alt="">
                            </div>
                            <div class="item">
                                <img src="../../Content/img/banner-bg.jpg" alt="">
                            </div>
                            <div class="item">
                                <img src="../../Content/img/profil_2.jpg" alt="">
                            </div>
                        </div>

                        <!-- Controls -->
                        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                        </a>
                    </div>




                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 thumbnail" style="padding-left: 10px; margin-left: 97px; text-align: center;">
                        <button class="btn btn-success" style="margin: 8px;" type="submit">
                            Request this rent
                        </button>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 thumbnail" style="padding-left: 10px; margin-left: 97px; text-align: center;">
                        <div style="float: left; margin-left: 15px;">
                            <p>
                                10€
                            </p>
                        </div>
                        <span style="margin-left: 15px; float: left">
                            <p>
                                20€
                            </p>
                        </span>
                        <span style="float: left; margin-left: 15px;">
                            <p>
                                50€
                            </p>
                        </span>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 thumbnail" id="map_canvas"></div>


                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 thumbnail" style="padding-left: 10px; margin-left: 97px; ">
                        <div>
                            <img class="img-responsive" src="../../Content/img/profil_2.jpg" alt="" style="float: left; height: 70px; width: 70px; border-radius: 2px;">
                            <span style="vertical-align: middle;">
                                Hanna N.
                            </span>
                        </div>
                    </div>
                </div>



            </div>
        </div>

    </div>
    <!-- /.container -->

</div>
<!-- /.content-section-a -->


@*<div class="banner">

    <div class="container">

        <div class="row">
            <div class="col-lg-6">
                <h2>Connect to Start Renting</h2>
            </div>
            <!-- <div class="col-lg-6">
                <ul class="list-inline banner-social-buttons">
                    <li><a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
                    </li>
                    <li><a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
                    </li>
                    <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
                    </li>
                </ul>
            </div> -->
        </div>

    </div>
    <!-- /.container -->

</div>*@
<!-- /.banner -->

    
</body>
